<!-- 搜索表单 -->
<template>
  <a-card :bordered="false" :body-style="{ paddingBottom: 0 }">
    <a-form :label-col="{ xl: 7, lg: 5, md: 7, sm: 4 }" :wrapper-col="{ xl: 17, lg: 19, md: 17, sm: 20 }">
      <a-row :gutter="8">
        <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
          <a-form-item label="客户名称">
            <a-auto-complete v-model:value="customer_val" :options="customerOptions" placeholder="请输入"
              @select="customer_onSelect" @search="customer_onSearch" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
          <a-form-item label="提单号">
            <a-input v-model:value.trim="form.billOfLading" placeholder="请输入" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
          <a-form-item label="状态">
            <a-select v-model:value="form.state" placeholder="请选择" allow-clear>
              <a-select-option value="">全部订单</a-select-option>
              <a-select-option value="未结单">未结单</a-select-option>
              <a-select-option value="未关联">未关联</a-select-option>
              <a-select-option value="下单">下单</a-select-option>
              <a-select-option value="接单">接单</a-select-option>
              <a-select-option value="进行中">进行中</a-select-option>
              <a-select-option value="结算">结算</a-select-option>
              <a-select-option value="指派车队">指派车队</a-select-option>
              <a-select-option value="提箱">提箱</a-select-option>
              <a-select-option value="到厂">到厂</a-select-option>
              <a-select-option value="离厂">离厂</a-select-option>
              <a-select-option value="进港">进港</a-select-option>
              <a-select-option value="发起费用清单">发起费用清单</a-select-option>
              <a-select-option value="应付费用审核">应付费用审核</a-select-option>
              <a-select-option value="应收费用审核">应收费用审核</a-select-option>
              <a-select-option value="结单">结单</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
          <a-form-item label="港口">
            <a-select v-model:value="form.dock" show-search placeholder="请输入口岸" :options="dock_options"
              :filter-option="dock_filterOption" allow-clear></a-select>
          </a-form-item>
        </a-col>
        <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
          <a-form-item label="装箱日期">
            <a-range-picker v-model:value="factoryPackDate2" :format="YYYY - MM - DD" placeholder="" class="ele-fluid" />
          </a-form-item>
        </a-col>
        <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
          <a-form-item label="业务员">
            <a-select v-model:value="salesman_value" show-search label-in-value placeholder="请选择业务员" allow-clear
              :options="company_options" :filter-option="salesman_filterOption"
              @change="salesman_handleChange"></a-select>
          </a-form-item>
        </a-col>
        <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
          <a-form-item label="操作">
            <a-select v-model:value="operater_value" show-search label-in-value placeholder="请选择操作" allow-clear
              :options="company_options" :filter-option="operater_filterOption"
              @change="operater_handleChange"></a-select>
          </a-form-item>
        </a-col>
        <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
          <a-form-item label="工厂地址">
            <a-input v-model:value.trim="form.factoryAddress" placeholder="请输入" allow-clear />
          </a-form-item>
        </a-col>
        <a-col v-if="searchExpand" :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
          <a-form-item label="车队">
            <a-input v-model:value.trim="form.carTeam" placeholder="请输入" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24" v-if="searchExpand">
          <a-form-item label="车牌">
            <a-input v-model:value.trim="form.carNo" placeholder="请输入" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24" v-if="searchExpand">
          <a-form-item label="司机">
            <a-input v-model:value.trim="form.driver" placeholder="请输入" allow-clear />
          </a-form-item>
        </a-col>
        <a-col v-if="searchExpand" :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
          <a-form-item label="船名">
            <a-input v-model:value.trim="form.vessel" placeholder="请输入" allow-clear />
          </a-form-item>
        </a-col>
        <a-col v-if="searchExpand" :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
          <a-form-item label="航次">
            <a-input v-model:value.trim="form.voyage" placeholder="请输入" allow-clear />
          </a-form-item>
        </a-col>
        <a-col v-if="searchExpand" :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
          <a-form-item label="箱号">
            <a-input v-model:value.trim="form.boxNum" placeholder="请输入" allow-clear />
          </a-form-item>
        </a-col>
        <a-col v-if="searchExpand" :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
          <a-form-item label="提箱堆场">
            <a-input v-model:value.trim="form.upYard" placeholder="请输入" allow-clear />
          </a-form-item>
        </a-col>
        <a-col v-if="searchExpand" :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
          <a-form-item label="进港码头">
            <a-input v-model:value.trim="form.arrivalPort" placeholder="请输入" allow-clear />
          </a-form-item>
        </a-col>
        <a-col v-if="searchExpand" :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
          <a-form-item label="落箱">
            <a-select v-model:value="form.dropBox" placeholder="请选择" allow-clear>
              <a-select-option value="">全部订单</a-select-option>
              <a-select-option value="1">落箱</a-select-option>
              <a-select-option value="2">不落箱</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col v-if="searchExpand" :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
          <a-form-item label="预提">
            <a-select v-model:value="form.withholding" placeholder="请选择" allow-clear>
              <a-select-option value="">全部订单</a-select-option>
              <a-select-option value="1">预提</a-select-option>
              <a-select-option value="2">不预提</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col v-if="searchExpand" :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
          <a-form-item label="现金">
            <a-select v-model:value="form.cash" placeholder="请选择" allow-clear>
              <a-select-option value="">全部订单</a-select-option>
              <a-select-option value="1">现金</a-select-option>
              <a-select-option value="2">不现金</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
          <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
            <a-space>
              <a-button type="primary" @click="search">查询</a-button>
              <a-button @click="reset">重置</a-button>
              <a @click="toggleExpand">
                <span v-if="searchExpand">
                  收起 <up-outlined class="ele-text-small" />
                </span>
                <span v-else>
                  展开 <down-outlined class="ele-text-small" />
                </span>
              </a>
            </a-space>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';
import useFormData from '@/utils/use-form-data';
import { listCustomersSel } from '@/api/order/customer';
import dayjs from 'dayjs';
import { listSettings } from '@/api/order/settings';
import { TIME_OUT } from '@/config/damon';
import { selectListSel } from '@/api/user/user';
// import keyWordsRef from '@/lin/utils/customref';

const emit = defineEmits(['search']);

let company_options = ref([]);
const salesman_value = ref({ value: '', label: '' });
const operater_value = ref({ value: '', label: '' });
selectListSel({ 'type': '平台用户' }).then((msg) => {
  company_options.value = msg
}).catch((e) => {
  message.error(e.message);
});
const salesman_handleChange = info => {
  form.salesmanid = ''
  form.salesman = ''
  if (info != undefined) {
    form.salesmanid = info.key + ''
    form.salesman = info.label
  }
};
const salesman_filterOption = (input, option) => {
  return option.label.indexOf(input) >= 0;
};

const operater_handleChange = info => {
  form.operaterid = info.key + ''
  form.operater = info.label
};
const operater_filterOption = (input, option) => {
  return option.label.indexOf(input) >= 0;
};

let dock_options = ref([])
listSettings({ 'typeM': 'dock_type' }).then(msg => {
  dock_options.value = msg
}).catch((e) => {
})

const dock_filterOption = (input, option) => {
  return (option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0);
};

// 表单数据
const { form, resetFields } = useFormData({
  username: '',
  nickname: '',
  sex: undefined,
  phone: '',
  status: undefined,
  factoryPackDateSearch1: dayjs().subtract(1, 'day').format('YYYY-MM-DD'),
  factoryPackDateSearch2: dayjs().add(1, 'day').format('YYYY-MM-DD'),
});

let factoryPackDate2 = ref([
  dayjs().subtract(1, 'day'),
  dayjs().add(1, 'day'),
  // dayjs().add(2, 'month'),
])

// 搜索表单是否展开
const searchExpand = ref(false);
// function getDate_self(op) {
//   let monght_s = op.getMonth() + 1
//   let day_s = op.getDate()
//   if (monght_s < 10) { monght_s = '0' + monght_s }
//   if (day_s < 10) { day_s = '0' + day_s }
//   return op.getFullYear() + '-' + monght_s + '-' + day_s
// }
/*   搜索 */
const search = () => {
  emit('search', form);
};

let where_timeout = 0
watch([() => form], (val) => {
  clearTimeout(where_timeout)
  where_timeout = setTimeout(() => {
    search()
  }, TIME_OUT);
},
  { deep: true }
)
watch([() => factoryPackDate2.value], (val) => {
  clearTimeout(where_timeout)
  where_timeout = setTimeout(() => {
    if (factoryPackDate2.value == null) {
      factoryPackDate2.value = []
    }
    if (factoryPackDate2.value.length > 0) {
      form.factoryPackDateSearch1 = dayjs(factoryPackDate2.value[0]).format('YYYY-MM-DD')
      form.factoryPackDateSearch2 = dayjs(factoryPackDate2.value[1]).format('YYYY-MM-DD')
    } else {
      form.factoryPackDateSearch1 = ''
      form.factoryPackDateSearch2 = ''
    }
  }, TIME_OUT);
},
  { deep: true }
)

// onMounted(() => {
//   search()
// });

//防止重复刷新
let customer_timeout = 0
let customer_val = ref('')
const customerOptions = ref([]);
const customer_onSearch = searchText => {
  clearTimeout(customer_timeout)
  customer_timeout = setTimeout(() => {
    listCustomersSel({ 'name': searchText, type: '货代' }).then(msg => {
      customerOptions.value = msg
    }).catch((e) => {
    })
  }, TIME_OUT);
};
const customer_onSelect = (value2, option2) => {
  // let a = customerOptions.value.find((item)=> {return item.value=value})
  // console.log(a.value,a.label)
  // form.name=a.value
  customer_val.value = option2.label
  form.customer = option2.label
};
const customer_change = (value2) => {
  let a = customerOptions.value.find((item) => { return item.value = value2 })
  customer_val.value = a.label
  form.customer = a.label
};
watch(() => customer_val.value, (val) => {
  form.customer = val
})

/*  重置 */
const reset = () => {
  resetFields();
  search();
};

/* 搜索展开/收起 */
const toggleExpand = () => {
  searchExpand.value = !searchExpand.value;
};
</script>
